<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    </div>
    <el-card>
      <div>
        <el-input placeholder="请输入内容"  class="input-with-select" style="width: 400px; margin-left:20px"  v-model="userinfo.query"  >
          <el-button slot="append" icon="el-icon-search" @click="getgoodsallList"></el-button>
        </el-input>
        <el-button type="primary" class="btn" @click="toAdd">添加用户</el-button>
      </div>
      <el-table
          :data="list"
          :stripe="true"
          border
          style="width: 95%; margin: 20px;">
        <el-table-column
            type="index"
            width="50px">
        </el-table-column>
        <el-table-column
            prop="goods_name"
            label="商品名称"
            width="550px">
        </el-table-column>
        <el-table-column
            prop="goods_price"
            label="商品价格(元)"
            width="80px">
        </el-table-column>
        <el-table-column
            width="50px"
            prop="goods_weight"
            label="商品重量">
        </el-table-column>
          <el-table-column
              width="200px"

              label="创建时间">
            <template #default="{row}">
             {{moment(row.upd_time).format('YYYY-MM-DD HH:ss:mm')}}
            </template>
          </el-table-column>

        <el-table-column
            label="操作">
          <template #default="{row}">
            <el-button type="primary" icon="el-icon-edit" @click="showbianjidialog(row.goods_id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delteyonghu(row.goods_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-pagination
        class="fooer"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 15,20, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog
        title="商品信息"
        :visible.sync="bianjishow"
        width="50%">
      <el-form :model="bianjiList" status-icon :rules="rules1" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="username">
          <el-input  v-model="bianjiList.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input  v-model="bianjiList.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="weigth">
          <el-input  v-model="bianjiList.weight" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="bianjishow = false">取 消</el-button>
    <el-button type="primary" @click="getbianjiList">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {deletegoodsList, getgoodList, getgoodsListId} from "@/api/user";
import moment from 'moment'

export default  {
  data() {
    return {
      moment,
      list:[],
      // 页面所有数据的对象
      userinfo:{
        query:'',
        pagenum:1,
        pagesize:10,
      },
      bianjishow:false,
      bianjiList:{
        username:'',
        price:'',
        weight:''
      },
      rules1:{
        username:{
          required:true,
          message:'请输入商品名称'
        },
        price:{
          required:true,
          message:'请输入商品价格'
        },
        weight:{
          required:true,
          message:'请输入商品重量'
        }
      },
      goods_id:'',
      pagenum:1,
      pagesize:10,
      total:0,
    }
  },
  created() {
this.getgoodsallList()
  },
  methods:{
    //获取所有列表数据
   async getgoodsallList() {
     const res = await getgoodList(this.userinfo)
     console.log(res.data)
     this.list =res.data.goods
     this.total=res.data.total
    },
    //修改编辑好的数据
    async getbianjiList() {
     const res= await this.$refs.form.validate()
    },
    //点开编辑拿到数据
   async showbianjidialog(id) {
     this.goods_id=id
     this.bianjishow=true
     const res1 = await getgoodsListId(this.goods_id)
     this.bianjiList.username=res1.data.goods_name
     this.bianjiList.price =res1.data.goods_price
     this.bianjiList.weight=res1.data.goods_weight

    },
    async delteyonghu(id) {
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)
      // console.log(res)
      if(res!=='confirm') {
        return this.$message.info('取消删除')
      }
      const res1 = await deletegoodsList(id)
      if(res1.meta.status!==200) {
       return  this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      this.getgoodsallList()
    },
    async handleSizeChange(e) {
     this.userinfo.pagesize=e
      const res= await getgoodList(this.userinfo)
      this.getgoodsallList()
    },
    async handleCurrentChange(r) {
     this.userinfo.pagenum=r
      const res= await getgoodList(this.userinfo)
      this.getgoodsallList()
    },
    toAdd() {
     this.$router.push('/add')
    }
  },
  //删除点击的这一行的数据

}
</script>
<style lang="less" scoped>
.el-card{
  margin-top: 15px;
}
.el-input{
  width: 400px;
}
.btn{
  margin-left: 20px;
}
</style>